<script setup>
import {computed} from "vue";
import store, {cosSource} from "../../store/store.js";
import {getGamePetsPick, playerAction, rollType} from "../../utils/banpickCall.js";
import {ElMessageBox} from "element-plus";

const phase = computed(() => store.getters.getCurrentPhaseInfo)

const buttonState = computed(() => store.getters.getButtonState)
const hiddenOpen = computed(() => store.state.game.hidden_open)
const gameRules = computed(() => store.getters.getRules)

const hidden = computed(() => store.state.game.payload.hidden)
const hiddenClick = () => {
  store.commit('changeHidden')
}

const rollClick = () => {
  ElMessageBox.confirm(
      '确定重随？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    rollType().then(res => {})
  }).catch(() => {
  })
}

const hiddenOpenChange = (value) => {
  store.commit('setHiddenOpen', value)
  getGamePetsPick().then(r => {})
}

const confirmButtonClick = () => {
  playerAction(store.state.game.payload)
}
</script>

<template>
  <div style="display: flex; height: 12%">
    <div style="width: 40%; display: flex">
      <div class="rule-img">
        <img style="height: 100%" :src="`${cosSource}UI/${gameRules.rule_first}.png`" :title="gameRules.rule_first_text"/>
      </div>
      <div class="rule-img">
        <img style="height: 100%" :src="`${cosSource}UI/${gameRules.rule_second}.png`" :title="gameRules.rule_second_text"/>
      </div>
      <div v-show="buttonState.rollDisabled" class="roll-and-hide-disable"
           :style="{backgroundImage: `url('${cosSource}UI/rollLock.png')`}" />
      <div v-show="!buttonState.rollDisabled" class="roll-and-hide-enable" @click="rollClick"
           :style="{backgroundImage: `url('${cosSource}UI/roll.png')`}" />

      <div v-show="buttonState.rollDisabled" class="roll-and-hide-enable"
           :style="{backgroundImage: `url('${cosSource}UI/hideLock.png')`}" />
      <div v-show="!buttonState.rollDisabled && hidden" class="roll-and-hide-enable" @click="hiddenClick"
           :style="{backgroundImage: `url('${cosSource}UI/hideOn.png')`}" />
      <div v-show="!buttonState.rollDisabled && !hidden" class="roll-and-hide-enable" @click="hiddenClick"
           :style="{backgroundImage: `url('${cosSource}UI/hideOff.png')`}" />
    </div>
    <div style="display: flex; align-items: flex-end">
      <div v-show="buttonState.disabled" class="action-button-disable" @click="confirmButtonClick"
           :style="{backgroundImage: `url('${cosSource}UI/${buttonState.text}Lock.png')`}"/>
      <div v-show="!buttonState.disabled" class="action-button-enable" @click="confirmButtonClick"
           :style="{backgroundImage: `url('${cosSource}UI/${buttonState.text}.png')`}"/>
    </div>
    <div style="width: 40%; display: flex; justify-content: center; align-items: end" >
      <div v-show="hiddenOpen === 0" class="hidden-open-button" @click="hiddenOpenChange(1)" style="height: 82.3%">
        <img :src="`${cosSource}UI/hideClose.png`" style="height: 100%"/>
      </div>
      <div v-show="hiddenOpen === 1" class="hidden-open-button" @click="hiddenOpenChange(0)" style="height: 100%"
           :style="{backgroundImage: `url('${cosSource}UI/hideOpen.png')`}">
        <img :src="`${cosSource}UI/hideOpen.png`" style="height: 100%"/>
      </div>
    </div>
  </div>
</template>

<style scoped>
.rule-img {
  height: 100%;
  margin-left: 10px;
  aspect-ratio: 1/1;
}
.roll-and-hide-enable {
  height: 100%;
  margin-left: 10px;
  aspect-ratio: 1/1;
  background-repeat: round;
  cursor: pointer;
}
.roll-and-hide-disable {
  height: 100%;
  margin-left: 10px;
  aspect-ratio: 1/1;
  background-repeat: round;
}
.action-button-enable {
  height: 80%;
  aspect-ratio: 2.5/1;
  background-repeat: round;
  cursor: pointer;
}
.action-button-disable {
  height: 80%;
  aspect-ratio: 2.5/1;
  background-repeat: round;
}
.hidden-open-button {
  height: 100%;
  cursor: pointer;
}
</style>